<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>

</head>
</head>
<body>
<div id="app">
  <h3>四大名著,我喜欢的是:{{likeBook}}</h3>
  <button v-on:click="showBook('西游记')">西游记</button>
  <button v-on:click="showBook('水浒传')">水浒传</button>
  <button v-on:click="showBook('三国演义')">三国演义</button>
  <button v-on:click="showBook('红楼梦')">红楼梦</button>

</div>
<!-- 1:引包 -->
<script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el:"#app",
    data:{
      likeBook:"红楼梦"
    },
    methods:{
      showBook:function (mybook) {
        this.likeBook=mybook;
      }
    }
  })
</script>

</body>
</html>
